<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Attribute Selector</title>
        <style type="text/css">
            /* 选择页面上显式书写了 id 属性(attribute)的元素 */
            [id] {
                color: blue;
                border: 1px solid green;
            }
            /* 选择页面上显式书写了 class 属性(attribute)的元素 */
            [class] {
                text-align: right;
                border: 1px solid green;
            }

            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
            [class~=odd] {
                background-color: #dfdfdf;
            }

            /* 选择页面上显式书写了id属性(attribute)且该属性值等于给定值的元素 */
            [id=seventh] {
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <h3>Attribute Selector</h3>
        <p>`Attribute Selector`被翻译为属性选择器</p>

        <ul>
            <li>[attribute]用于选择显式定义了指定属性的元素</li>
            <li>[attribute~=word]用于选择显式定义了指定属性并且该属性值中包含指定单词的元素</li>
            <li>[attrivute=value]用于选择显式定义了指定属性并且该属性值等于给定值的元素</li>
        </ul>

        <!-- 所有元素的 calss 属性值中都可以包含多个 class-name （它们之间使用空格隔开即可）-->
        <div id="first" class="odd afang yuan-fang di-pang lao-wang">第一个</div>
        <p id="second" class="even yuan-fang">老二</p>
        <div id="third" class="odd di-pang">小三</div>
        <section id="fourth" class="even lao-wang">老四</section>
        <div id="fifth" class="odd laowu">小五</div>
        <div class="even xiaoliu">小六汤包</div>
        <div id="seventh">每一天</div>

    </body>
</html>